<template>
 <div>
        <h2 class="sub-header">Hero List</h2>
        <a class="btn btn-success" href="add.html">Add</a>
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>id</th>
                <th>name</th>
                <th>gender</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
               <tr v-for="(item, index) in dataList" :key="index">
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.gender}}</td>
                  <td>
                    <a href="javescript:;">修改</a>
                    <a href="javescript:;">删除</a>
                  </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
</template>

<script>
//得到所有的列表数据:axios
import axios from "axios"

export default {
    data(){
      return{
        dataList:""
      }
    },
    methods:{
      getData(){
         var url= "http://localhost:3000/users"
         axios.get(url)
            .then(data=>{
               if (data.status === 200) {
              this.dataList = data.data
            }
            })
      }
    },
    created(){
      this.getData()
    }
  }
</script>

<style scoped>
th,
td {
    text-align: center;
}
</style>
  